<template>
  <div class="container">
    <div class="itemleft">
      <ItemPage>
        <template #main>
          <CeOne />
        </template>
      </ItemPage>
      <ItemPage>
        <template #main>
          <CeTwo />
        </template>
      </ItemPage>
    </div>
    <div class="itemright">
      <ItemPage>
        <template #main>
          <CeThree />
        </template>
      </ItemPage>
      <ItemPage>
        <template #main>
          <CeFour />
        </template>
      </ItemPage>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import CeOne from "../../components/CeOne.vue";
import ItemPage from "../../components/ItemPage.vue";
import CeTwo from "../../components/CeTwo.vue";
import CeThree from "../../components/CeThree.vue";
import CeFour from "../../components/CeFour.vue";
</script>
  
  <style lang="scss">
.container {
  width: 100%;
  margin: 0 auto;
  // background-color: gray;
  display: flex;
  .itemleft,
  .itemright {
    flex: 1;
  }
}
</style>